<script>
export default goods;
import goods from "./index";
</script>
<!--src 引用css样式-->
<style src="./index.css" lang="css"></style>

<template>
  <div class="brand-wrapper">
    <!--搜索功能-->
    <div class="search-form">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="商品名称" size="mini">
          <el-input placeholder="商品名称" v-model="searchParams.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品型号" size="mini">
          <el-input placeholder="商品型号" v-model="searchParams.modelId"></el-input>
        </el-form-item>
        <br>
        <el-form-item label="商品品牌" size="mini">
          <el-select  v-model="searchParams.brandId" placeholder="商品品牌" size="mini" >
            <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.brandName"
                    :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>

<!--        <el-form-item label="商品类别" size="mini">-->
<!--          <el-select  v-model="searchParams.typeId" placeholder="商品类型" size="mini" >-->
<!--            <el-option-->
<!--                    v-for="item in typeList"-->
<!--                    :key="item.id"-->
<!--                    :label="item.typeName"-->
<!--                    :value="item.id"-->
<!--            ></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="商品类别" size="mini">
          <el-cascader
                  v-model="searchParams.typeId"
                  :options="type_options"
                  :props="{ checkStrictly: true }"
                  @change="handleChange"></el-cascader>
        </el-form-item>
        <el-form-item label="商品颜色" size="mini">
          <el-select v-model="searchParams.colourId" placeholder="商品颜色" size="mini">
            <el-option
                    v-for="item in colourList"
                    :key="item.id"
                    :label="item.colourName"
                    :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>




        <!--<el-form-item label="日期选项" size="mini">-->
          <!--日期组件-->
          <!--<el-date-picker-->
              <!--v-model="pickerOptions.startDate"-->
              <!--type="datetimerange"-->
              <!--:picker-options="pickerOptions"-->
              <!--value-format="yyyy-MM-dd HH:mm:ss"-->
              <!--range-separator="-"-->
              <!--start-placeholder="开始日期"-->
              <!--end-placeholder="结束日期"-->
              <!--align="right"-->
              <!--@change="chooseTime">-->
          <!--</el-date-picker>-->

        <!--</el-form-item>-->

        <el-button type="primary" size="mini" @click="searchPage">查询</el-button>
        <el-button type="warning" size="mini" @click="resetForm">重置</el-button>
      </el-form>
    </div>
    <!--查询按钮-->

    <div class="crud-box">
      <el-button type="primary" icon="el-icon-edit" size="mini" @click="dialogFormVisible1=true,formData={},imageUrl='',productPage()">创建一类商品</el-button>
      <el-button type="primary" icon="el-icon-edit" size="mini" @click="dialogFormVisible2=true,formData={},imageUrl=''">创建二类商品</el-button>
      <!--<el-button type="success" icon="el-icon-edit" size="mini" :disabled="batchIds.length!=1"-->
                 <!--@click="dialogFormVisible3=true,goodsfindById()">修改-->
      <!--</el-button>-->
      <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="batchIds.length<=0" @click="showMsg()">删除
      </el-button>
    </div>

    <!--table表格-->
    <div class="table-box">

      <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="selectChange">
        <el-table-column
            type="selection"
            width="55" align="center">
        </el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品编号">
                <el-tag><span size="small">{{ props.row.id }}</span></el-tag>
              </el-form-item>
              <el-form-item label="商品名称">
                <el-tag> <span size="small">{{ props.row.goodsName }}</span></el-tag>
              </el-form-item>
              <el-form-item label="商品分类">
                <el-tag><span size="small">{{ props.row.typeName }}</span></el-tag>
              </el-form-item>
              <el-form-item label="采购方式">
                <el-tag> <span size="small">集团采购</span></el-tag>
              </el-form-item>
              <el-form-item label="是否铺货">
                <el-tag><span size="small">非铺货</span></el-tag>
              </el-form-item>
              <el-form-item label="是否备机">
                <el-tag><span size="small">非备机</span></el-tag>
              </el-form-item>
              <el-form-item label="商品品牌">
                <el-tag><span size="small">{{ props.row.brandName }}</span></el-tag>
              </el-form-item>
              <el-form-item label="商品型号">
                <el-tag><span size="small">{{ props.row.modelId }}</span></el-tag>
              </el-form-item>
              <el-form-item label="市场价">
                <el-tag><span size="small">{{ props.row.salePrice }}</span></el-tag>
              </el-form-item>
              <el-form-item label="商城价">
                <el-tag><span size="small">{{ props.row.mallPrice }}</span></el-tag>
              </el-form-item>
              <el-form-item label="最低库存">
                <el-tag><span size="small">{{ props.row.minimumStock }}</span></el-tag>
              </el-form-item>
              <el-form-item label="商品颜色">
                <el-tag><span size="small">{{ props.row.colourName }}</span></el-tag>
              </el-form-item>
              <el-form-item label="能否采购" prop="delivery" :disabled=true>
                <el-switch v-model="props.row.purchasable" :disabled=true></el-switch>
              </el-form-item>
            <el-form-item label="商品颜色">
              <el-tag><span size="small">{{ props.row.colourName }}</span></el-tag>
            </el-form-item>
              <el-form-item label="商品图片">

                <img :src="props.row.goodsImg" height="80px" >

              </el-form-item>

<!--            <el-form-item label="商品图片">-->
<!--              <el-avatar  :src="props.row.goodsImg" size="small"  height="50px"></el-avatar>-->
<!--            </el-form-item>-->


            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="id"
            label="商品编号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="goodsName"
            label="商品名称"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="typeName"
            label="商品分类"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="brandName"
            label="商品品牌"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="modelId"
            label="商品型号"
            width="180" align="center">
        </el-table-column>
        <el-table-column
            prop="colourName"
            label="商品颜色"
            width="180" align="center">
        </el-table-column>
        <!--<el-table-column-->
            <!--prop="brandSite"-->
            <!--label="地址" align="center">-->
          <!--<template v-slot="suibian">-->
            <!--<a :href="suibian.row.brandSite">{{ suibian.row.brandSite }}</a>-->
          <!--</template>-->
        <!--</el-table-column>-->
        <el-table-column
            prop="goodsImg"
            label="图标" align="center">
          <template v-slot="obj">
            <img :src="obj.row.goodsImg" height="50px" >
          </template>
        </el-table-column>

        <el-table-column
            prop="address"
            label="操作" align="center">

          <template v-slot="obj">
            <el-button icon="el-icon-search" @click="dialogFormVisible4=true,formData3.id=obj.row.id,goodsfindById(obj.row)" circle></el-button>
            <el-button type="primary" icon="el-icon-edit"
                       @click="dialogFormVisible3=true,formData.id=obj.row.id,goodsfindById(obj.row)"
                       style="margin-right: 5px"
                       circle
            ></el-button>
            <el-popconfirm
                confirm-button-text='确定'
                cancel-button-text='取消'
                icon="el-icon-info"
                icon-color="red"
                title="确定删除吗？"
                @confirm="deleteById(obj.row)">
              <el-button type="danger" slot="reference" icon="el-icon-delete"
                         @click="id=obj.row.id" circle></el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div class="page-box">
      <el-pagination
          background
          layout="prev, pager, next"
          :current-page="this.searchParams.currentPage"
          :page-size="this.searchParams.pageSize"
          @current-change="currentPageChange"
          :total="total" align="right">
      </el-pagination>
    </div>

    <!-- 弹框dialog 一类商品-->
    <div class="dialog-box">
      <el-dialog title="新建一类商品" :visible.sync="dialogFormVisible" width="30%">
        <el-form :model="formData" label-width="80px">
          <el-form-item label="商品品牌" size="mini" >
            <el-select  v-model="formData.brandId" placeholder="商品品牌" size="mini" :disabled=true>
              <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.brandName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品型号" size="mini">
            <el-input autocomplete="off" v-model="formData.modelId" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="商品颜色" size="mini">
            <el-select v-model="formData.colourId" placeholder="商品颜色" size="mini" :disabled=true>
              <el-option
                      v-for="item in colourList"
                      :key="item.id"
                      :label="item.colourName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品类别" size="mini">
            <el-cascader
                v-model="formData.typeId"
                :options="type_options"
                :props="{ checkStrictly: true }"
                @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="采购方式" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsPurchase" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="是否铺货" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsDistribution" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="是否备机" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsStandbyMachine" :disabled=true></el-input>
          </el-form-item>

          <el-form-item label="商品名称" size="mini">
            <el-input autocomplete="off" v-model="formData.goodsName"></el-input>
          </el-form-item>

          <el-form-item label="市场价" size="mini">
            <el-input autocomplete="off" v-model="formData.salePrice"></el-input>
          </el-form-item>
          <el-form-item label="商城价" size="mini">
            <el-input autocomplete="off" v-model="formData.mallPrice"></el-input>
          </el-form-item>
          <el-form-item label="能否采购" prop="delivery">
            <el-switch v-model="formData.purchasable"></el-switch>
          </el-form-item>
          <el-form-item label="最低库存量" size="mini">
            <el-input autocomplete="off" v-model="formData.minimumStock"></el-input>
          </el-form-item>


          <el-form-item label="商品图片" v-model="formData.goodsImg" size="mini" >
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :http-request="getImgStr"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false,save(),dialogFormVisible1=false" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </div>
     <!-- 弹框dialog 修改商品-->
    <div class="dialog-box">
      <el-dialog title="修改商品" :visible.sync="dialogFormVisible3" width="30%">
        <el-form :model="formData3" label-width="80px">
          <el-form-item label="商品品牌" size="mini" >
            <el-select  v-model="formData3.brandId" placeholder="商品品牌" size="mini" :disabled=true>
              <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.brandName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品型号" size="mini">
            <el-input autocomplete="off" v-model="formData3.modelId" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="商品颜色" size="mini">
            <el-select v-model="formData3.colourId" placeholder="商品颜色" size="mini" :disabled=true>
              <el-option
                      v-for="item in colourList"
                      :key="item.id"
                      :label="item.colourName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品类别" size="mini">
            <el-cascader
                v-model="formData3.typeId"
                :options="type_options"
                :props="{ checkStrictly: true }"
                @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="商品类别" size="mini">
            <el-select  v-model="formData3.typeId" placeholder="商品类别" size="mini" :disabled=true>
              <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.typeName"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="采购方式" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsPurchase" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="是否铺货" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsDistribution" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="是否备机" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsStandbyMachine" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="商品名称" size="mini">
            <el-input autocomplete="off" v-model="formData3.goodsName"></el-input>
          </el-form-item>

          <el-form-item label="市场价" size="mini">
            <el-input autocomplete="off" v-model="formData3.salePrice"></el-input>
          </el-form-item>
          <el-form-item label="商城价" size="mini">
            <el-input autocomplete="off" v-model="formData3.mallPrice"></el-input>
          </el-form-item>
          <el-form-item label="能否采购" prop="delivery">
            <el-switch v-model="formData3.purchasable"></el-switch>
          </el-form-item>
          <el-form-item label="最低库存量" size="mini">
            <el-input autocomplete="off" v-model="formData3.minimumStock"></el-input>
          </el-form-item>


          <el-form-item label="商品图片" v-model="formData3.goodsImg" size="mini" >
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :http-request="getImgStr"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible3 = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible3 = false,updateByIdgoods()" size="mini">保 存</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 弹框dialog 商品详情-->
    <div class="dialog-box">
      <el-dialog title="商品详情" :visible.sync="dialogFormVisible4" width="30%">
        <el-form :model="formData3" label-width="80px">
          <el-form-item label="商品品牌" size="mini" >
            <el-select  v-model="formData3.brandId" placeholder="商品品牌" size="mini" :disabled=true>
              <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.brandName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品型号" size="mini">
            <el-input autocomplete="off" v-model="formData3.modelId" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="商品颜色" size="mini">
            <el-select v-model="formData3.colourId" placeholder="商品颜色" size="mini" :disabled=true>
              <el-option
                      v-for="item in colourList"
                      :key="item.id"
                      :label="item.colourName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品类别" size="mini">
            <el-cascader
                v-model="formData3.typeId"
                :options="type_options"
                :props="{ checkStrictly: true }"
                @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="采购方式" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsPurchase" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="是否铺货" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsDistribution" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="是否备机" size="mini">
            <el-input autocomplete="off" v-model="formData.basicsStandbyMachine" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="商品名称" size="mini">
            <el-input autocomplete="off" v-model="formData3.goodsName" :disabled=true></el-input>
          </el-form-item>

          <el-form-item label="市场价" size="mini">
            <el-input autocomplete="off" v-model="formData3.salePrice" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="商城价" size="mini">
            <el-input autocomplete="off" v-model="formData3.mallPrice" :disabled=true></el-input>
          </el-form-item>
          <el-form-item label="能否采购" prop="delivery">
            <el-switch v-model="formData3.purchasable" :disabled=true></el-switch>
          </el-form-item>
          <el-form-item label="最低库存量" size="mini">
            <el-input autocomplete="off" v-model="formData3.minimumStock" :disabled=true></el-input>
          </el-form-item>


          <el-form-item label="商品图片" v-model="formData3.goodsImg" size="mini"  :disabled=true>
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :http-request="getImgStr"
                :disabled=true
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <!--<el-button @click="dialogFormVisible4 = false" size="mini">取 消</el-button>-->
          <el-button type="primary" @click="dialogFormVisible4 = false" size="mini">返 回</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 弹框dialog 二类商品-->
    <div class="dialog-box">
      <el-dialog title="新建二类商品" :visible.sync="dialogFormVisible2" width="30%">
        <el-form :model="formData" label-width="80px">
          <el-form-item label="商品品牌" size="mini" >
            <el-select  v-model="formData.brandId" placeholder="商品品牌" size="mini" >
              <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.brandName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品型号" size="mini">
            <el-input autocomplete="off" v-model="formData.modelId" style="width: 40%"></el-input>
          </el-form-item>
          <el-form-item label="商品颜色" size="mini">
            <el-select v-model="formData.colourId" placeholder="商品颜色" size="mini" >
              <el-option
                      v-for="item in colourList"
                      :key="item.id"
                      :label="item.colourName"
                      :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品类别" size="mini">
            <el-cascader
                v-model="formData.typeId"
                :options="type_options"
                :props="{ checkStrictly: true }"
                @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item label="商品名称" size="mini">
            <el-input autocomplete="off" v-model="formData.goodsName" style="width: 40%"></el-input>
          </el-form-item>

          <el-form-item label="市场价" size="mini">
            <el-input autocomplete="off" v-model="formData.salePrice" style="width: 40%"></el-input>
          </el-form-item>
          <el-form-item label="商城价" size="mini">
            <el-input autocomplete="off" v-model="formData.mallPrice" style="width: 40%"></el-input>
          </el-form-item>

          <el-form-item label="最低库存" size="mini">
            <el-input autocomplete="off" v-model="formData.minimumStock" style="width: 40%"></el-input>
          </el-form-item>
          <el-form-item label="能否采购" prop="delivery">
            <el-switch v-model="formData.purchasable"></el-switch>
          </el-form-item>

          <el-form-item label="商品图片" v-model="formData.goodsImg" size="mini" >
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :http-request="getImgStr"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = false,save()" size="mini">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 弹框dialog 产品选择-->
    <div class="dialog-box">
      <el-dialog title="产品选择" :visible.sync="dialogFormVisible1" width="80%">
        <div class="brand-wrapper">
          <!--搜索功能-->
          <div class="search-form">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="存货档案编码" size="mini">
                <el-input placeholder="存货档案编码" v-model="searchParams1.goodsId"></el-input>
              </el-form-item>
              <el-form-item label="基础库-型号" size="mini">
                <el-input placeholder="基础库-型号" v-model="searchParams1.modelId"></el-input>
              </el-form-item>
              <br>
              <el-form-item label="基础库-品牌" size="mini">
                <el-select  v-model="searchParams1.brandId" placeholder="商品品牌" size="mini" >
                  <el-option
                          v-for="item in brandList"
                          :key="item.id"
                          :label="item.brandName"
                          :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="基础库-类别" size="mini">
                <el-cascader
                    v-model="searchParams.typeId"
                    :options="type_options"
                    :props="{ checkStrictly: true }"
                    @change="handleChange1"></el-cascader>
              </el-form-item>
              <el-form-item label="基础库-颜色" size="mini">
                <el-select v-model="searchParams1.colourId" placeholder="商品颜色" size="mini">
                  <el-option
                          v-for="item in colourList"
                          :key="item.id"
                          :label="item.colourName"
                          :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>


              <el-button type="primary" size="mini" @click="productPage">查询</el-button>
              <el-button type="warning" size="mini" @click="productresetForm">重置</el-button>
            </el-form>
          </div>

          <!--table表格  产品-->
          <div class="table-box">

            <el-table
                    :data="tableData1"
                    style="width: 100%"
                    @selection-change="selectChange">
              <el-table-column
                      prop="id"
                      label="序号"
                      width="180" align="center">
              </el-table-column>
              <el-table-column
                      type="selection"
                      width="55" align="center">
              </el-table-column>
              <el-table-column
                      prop="goodsId"
                      label="存货档案编码"
                      width="180" align="center">
              </el-table-column>
              <el-table-column
                      prop="typeName"
                      label="商品分类"
                      width="180" align="center">
              </el-table-column>
              <el-table-column
                      prop="brandName"
                      label="商品品牌"
                      width="180" align="center">
              </el-table-column>
              <el-table-column
                      prop="modelId"
                      label="商品型号"
                      width="180" align="center">
              </el-table-column>
              <el-table-column
                      prop="colourName"
                      label="商品颜色"
                      width="180" align="center">
              </el-table-column>

              <el-table-column
                      prop="address"
                      label="操作" align="center">

                <template v-slot="obj">
                  <el-button type="primary"
                             @click="dialogFormVisible=true,findById(obj.row)"
                             style="margin-right: 5px"
                  >请选择</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--分页-->
          <div class="page-box" >
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="this.searchParams1.currentPage"
                    :page-size="this.searchParams1.pageSize"
                    @current-change="productcurrentPageChange"
                    :total="total1" align="right">
            </el-pagination>
          </div>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
